<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Names List</title>
    <style>
        /* General Styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            color: #333;
        }

        .container {
            width: 80%;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #0056b3;
            margin-bottom: 20px;
        }

        /* Form Styles */
        .form {
            margin-bottom: 20px;
        }

        fieldset {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin: 0;
            background-color: #f9f9f9;
        }

        legend {
            font-size: 18px;
            font-weight: bold;
            color: #0056b3;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-group input {
            width: calc(100% - 20px);
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #0056b3;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
        }

        .btn:hover {
            background-color: #004494;
        }

        /* Notifications */
        .notifications {
            margin-top: 20px;
        }

        .alert {
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
            color: #fff;
            font-weight: bold;
        }

        .alert.error {
            background-color: #e74c3c;
        }

        .alert.success {
            background-color: #2ecc71;
        }

        /* Removed Names */
        .removed-names {
            margin-top: 20px;
            font-style: italic;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Manage Names List</h1>

        <!-- Form to specify the starting name, number of names, date, and additional names -->
        <form id="displayForm" class="form">
            <fieldset>
                <legend>Generate Names List</legend>
                <div class="form-group">
                    <label for="startName">Starting Name:</label>
                    <input type="text" id="startName" name="startName" required>
                </div>
                <div class="form-group">
                    <label for="numNames">Number of Names to Display:</label>
                    <input type="number" id="numNames" name="numNames" min="1" required>
                </div>
                <div class="form-group">
                    <label for="displayDate">Date:</label>
                    <input type="date" id="displayDate" name="displayDate">
                </div>
                <div class="form-group">
                    <label for="additionalName">Additional Name 1:</label>
                    <input type="text" id="additionalName" name="additionalName">
                </div>
                <div class="form-group">
                    <label for="additionalName2">Additional Name 2:</label>
                    <input type="text" id="additionalName2" name="additionalName2">
                </div>
                <button type="submit" class="btn">Download Names List as PDF</button>
            </fieldset>
        </form>

        <!-- Form to input a name to remove -->
        <form id="removeForm" class="form">
            <fieldset>
                <legend>Remove Name</legend>
                <div class="form-group">
                    <label for="removeName">Name to Remove:</label>
                    <input type="text" id="removeName" name="removeName" required>
                </div>
                <button type="submit" class="btn">Remove Name</button>
            </fieldset>
        </form>

        <!-- Container to display removed names -->
        <div id="removedNamesContainer" class="removed-names"></div>

        <!-- Notifications container -->
        <div id="notificationContainer" class="notifications"></div>
    </div>

    <script>
        const { jsPDF } = window.jspdf; // Get jsPDF from the global window object
        const displayForm = document.getElementById('displayForm');
        const removeForm = document.getElementById('removeForm');
        const notificationContainer = document.getElementById('notificationContainer');
        const removedNamesContainer = document.getElementById('removedNamesContainer');

        // Predefined list of names
        let predefinedNames = [
            "Alice", "Bob", "Charlie", "David", "Eve",
            "Frank", "Grace", "Hannah", "Ivy", "Jack",
            "Karen", "Leo", "Mona", "Nina", "Oscar",
            "Paul", "Quinn", "Rachel", "Steve", "Tom",
            "Uma", "Vera", "Will", "Xena", "Yara", "Zane", "Alice", "Bob", "Charlie", "David", "Eve",
            "Frank", "Grace", "Hannah", "Ivy", "Jack",
            "Karen", "Leo", "Mona", "Nina", "Oscar",
            "Paul", "Quinn", "Rachel", "Steve", "Tom",
            "Uma", "Vera", "Will", "Xena", "Yara", "Zane"
        ];

        // Function to generate PDF content
        function generatePDFContent(startName, count, displayDate, additionalName1, additionalName2) {
            const pdf = new jsPDF();
            pdf.setFontSize(16);
            pdf.text('Names List', 20, 20);

            if (displayDate) {
                pdf.setFontSize(12);
                pdf.text(`Date: ${displayDate}`, 20, 30);
            }

            const marginLeft = 10;
            const marginCenter1 = 60; // Adjusted for the first center column
            const marginCenter2 = 110; // Adjusted for the second center column
            const marginRight = 160; // Adjusted for the right column
            const lineHeight = 10;
            let y = 40; // Initial vertical position
            const maxItemsPerColumn = 15;
            const maxItemsPerPage = 60; // Limit to ensure all content fits on one page

            const startIndex = predefinedNames.indexOf(startName) + 1; // Start after the given name
            if (startIndex <= 0 || startIndex >= predefinedNames.length) {
                pdf.setFontSize(12);
                pdf.setTextColor(0, 0, 0); // Set text color to black
                pdf.text('Starting name not found or no subsequent names in the list.', marginLeft, y);
            } else {
                const endIndex = Math.min(startIndex + count, predefinedNames.length);
                const names = predefinedNames.slice(startIndex, endIndex);

                // Split names into four columns
                const itemsInFirstColumn = names.slice(0, maxItemsPerColumn);
                const itemsInSecondColumn = names.slice(maxItemsPerColumn, 2 * maxItemsPerColumn);
                const itemsInThirdColumn = names.slice(2 * maxItemsPerColumn, 3 * maxItemsPerColumn);
                const itemsInFourthColumn = names.slice(3 * maxItemsPerColumn, maxItemsPerPage);

                // Include the additional names in the columns if provided and not already included
                if (additionalName1 && !itemsInFirstColumn.includes(additionalName1) && !itemsInSecondColumn.includes(additionalName1) && !itemsInFourthColumn.includes(additionalName1)) {
                    itemsInThirdColumn.push(additionalName1);
                }
                if (additionalName2 && !itemsInFirstColumn.includes(additionalName2) && !itemsInSecondColumn.includes(additionalName2) && !itemsInFourthColumn.includes(additionalName2)) {
                    itemsInFourthColumn.push(additionalName2); // Add without "Y"
                }

                // Numbering starts from 1 and continues across all columns
                let currentNumber = 1;

                // First Column
                pdf.setFontSize(12);
                pdf.setTextColor(0, 0, 0); // Set text color to black
                itemsInFirstColumn.forEach((name) => {
                    pdf.text(`bank ${currentNumber}. ${name}`, marginLeft, y);
                    y += lineHeight;
                    currentNumber++;
                });

                // Reset Y position and adjust for the second column
                y = 40;
                pdf.setTextColor(0, 0, 0); // Set text color to black
                itemsInSecondColumn.forEach((name) => {
                    pdf.text(`bank ${currentNumber}. ${name}`, marginCenter1, y);
                    y += lineHeight;
                    currentNumber++;
                });

                // Reset Y position and adjust for the third column
                y = 40;
                pdf.setTextColor(0, 0, 0); // Set text color to black
                itemsInThirdColumn.forEach((name) => {
                    pdf.text(`T ${currentNumber}. ${name}`, marginCenter2, y);
                    y += lineHeight;
                    currentNumber++;
                });

                // Reset Y position and adjust for the fourth column
                y = 40;
                pdf.setTextColor(0, 0, 0); // Set text color to black
                itemsInFourthColumn.forEach((name) => {
                    pdf.text(`F ${currentNumber}. ${name}`, marginRight, y);
                    y += lineHeight;
                    currentNumber++;
                });

                // Handle case where fourth column is the last column with remaining names
                if (itemsInFourthColumn.length > 0) {
                    y = Math.max(y, 40 + lineHeight * itemsInFourthColumn.length);
                }
            }

            // Ensure all content fits on one page
            pdf.setPage(1); // Force to ensure content fits on a single page

            return pdf;
        }

        // Function to trigger the download of the PDF
        function downloadNamesList(startName, count, displayDate, additionalName1, additionalName2) {
            const pdf = generatePDFContent(startName, count, displayDate, additionalName1, additionalName2);
            pdf.save('names_list.pdf');
        }

        // Function to remove all occurrences of a specified name
        function removeName(nameToRemove) {
            predefinedNames = predefinedNames.filter(name => name !== nameToRemove);
        }

        // Function to display notifications
        function showNotification(message, type) {
            const notification = document.createElement('div');
            notification.className = `alert ${type}`;
            notification.textContent = message;
            notificationContainer.appendChild(notification);
            setTimeout(() => notification.remove(), 5000);
        }

        // Function to display the removed name in the container
        function displayRemovedName(name) {
            const nameElement = document.createElement('p');
            nameElement.textContent = `Removed: ${name}`;
            removedNamesContainer.appendChild(nameElement);
        }

        // Handle display form submission
        displayForm.addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent form submission
            
            const startName = document.getElementById('startName').value.trim();
            const numNames = parseInt(document.getElementById('numNames').value, 10);
            const displayDate = document.getElementById('displayDate').value;
            const additionalName1 = document.getElementById('additionalName').value.trim();
            const additionalName2 = document.getElementById('additionalName2').value.trim();

            if (numNames <= 0) {
                showNotification('Please enter a valid number greater than 0.', 'error');
                return;
            }

            downloadNamesList(startName, numNames, displayDate, additionalName1, additionalName2); // Trigger PDF download
        });

        // Handle remove name form submission
        removeForm.addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent form submission
            
            const removeNameInput = document.getElementById('removeName');
            const nameToRemove = removeNameInput.value.trim();
            
            if (nameToRemove === '') return; // Don't proceed if the input is empty
            
            removeName(nameToRemove); // Remove name from predefined list

            // Notify user of successful removal and display removed name
            showNotification(`Name "${nameToRemove}" removed from the list.`, 'success');
            displayRemovedName(nameToRemove);

            removeNameInput.value = ''; // Clear the input field
        });
    </script>
</body>
</html>
